<template>
    <div id="calendar-entry">
        <div class="field">
            <label class="label">Event Details:</label>
            <div class="control">
                <input class="input" type="text" placeholder="New Event" v-model="inputEntry" required>
            </div>
            <p class="help">day of event:<b>{{titleOfActiveDay}}</b></p>
        </div>
        <div class="field">
            <div class="control">
                <button class="button is-primary is-small is-outlined" @click="submitEvent(dayId,inputEntry)">Submit</button>
            </div>
        </div>
        <p style="color: red;font-size: 13px" v-if="error">
            You must type something first
        </p>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import store from '@/store'
@Component({})
export default class CalendarEntry extends Vue {
    name = 'CalendarEntry';
    inputEntry = "";
    dayId = 0;
    error = false;
    private get titleOfActiveDay(){
        this.dayId = this.$store.getters.getActiveDay.id;
        return this.$store.getters.getActiveDay.fullTitle;
    }
    private submitEvent(dayId:number,inputEntity:string){
        if (this.inputEntry.length == 0) {
            return this.error = true;
        }
        this.$store.commit("submitEvent",{dayId:dayId,eventDetail:inputEntity});
        this.inputEntry = "";
        this.error = false;
    }
}
</script>

<style scoped>
#calendar-entry{

}
</style>
